<template>
  <div class="app-container">

    <!-- 表头条件表单 -->
    <el-form :inline="true" :model="userQuery" class="form-inline">
      <el-form-item label="用户名称">
        <el-input v-model="userQuery.username" placeholder="用户名称"></el-input>
      </el-form-item>
      <el-form-item label="角色名称">
        <el-input v-model="userQuery.roleName" placeholder="角色名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectAllUser">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格渲染 -->
    <el-table :data="users" border style="width: 100%">
      <el-table-column fixed label="用户头像" align="center" width="80">
        <template slot-scope="scope">
            <img :src="scope.row.salt" width="40" height="40" class="head_pic"
              onerror="javascript:this.src='https://gitee.com/wuhunyu/images/raw/master/learn/images/20210114220355.JPG'"/>
        </template>
      </el-table-column>
      <el-table-column fixed prop="username" label="用户名称"></el-table-column>
      <el-table-column fixed prop="nickName" label="用户昵称"></el-table-column>
      <el-table-column fixed prop="roleName" label="角色名"></el-table-column>
      <el-table-column fixed prop="roleCode" label="角色代码"></el-table-column>
      <el-table-column fixed prop="remark" label="角色备注"></el-table-column>
      <el-table-column fixed prop="permissionName" label="资源名称"></el-table-column>
      <el-table-column fixed prop="permissionValue" label="权限值"></el-table-column>
      <el-table-column fixed label="资源类型">
        <template slot-scope="scope">
          <span style="color: orange;">{{scope.row.type==1?'菜单':'按钮'}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed prop="path" label="访问路径" sortable></el-table-column>
      <el-table-column fixed prop="component" label="组件路径" sortable></el-table-column>
      <el-table-column fixed label="资源状态">
        <template slot-scope="scope">
          <span style="color: orange;">{{scope.row.status==1?'正常':'禁止'}}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <div class="block">
      <el-pagination
        @current-change="changeCurrent"
        @size-change="changeLimit"
        :current-page="userQuery.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="userQuery.limit"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>

  // 引入需要的js
  import userApi from '@/api/user'

  export default {

    // 核心代码
    data() {
      return {
        // 设置参数
        // 用户查询
        "userQuery": {
          "current": 1,
          "limit": 10,
          "username": "",
          "roleName": ""
        },
        // 总记录数
        "total": 0,
        // 返回结果集合
        "users": []
      }
    },
    // 页面渲染之前调用方法
    created() {
      // 调用查询用户信息方法
      this.selectAllUser();
    },
    // 方法定义
    methods: {
      // 获取用户，角色和资源信息
      selectAllUser() {
        userApi.selectAllUser(this.userQuery)
          .then(res => {
            // 结果集
            this.users=res.data.users;
            // 总记录数
            this.total=res.data.total;
          }).catch(err => {
            this.$message.error(err.message);
          });
      },
      // 跳转当前页
      changeCurrent(current) {
        this.userQuery.current=current;
        this.selectAllUser();
      },
      // 修改当前页面最大查看记录数
      changeLimit(limit) {
        this.userQuery.limit=limit;
        this.selectAllUser();
      }
    }

  }

</script>
